<script>
    var preScale = 1;

    var initPage2 = function () {
        var winH = $("body").height();
        $("#page-2").css("font-size", winH / 10 + "px");
        $("#page-2").css("display", "block");

        initZS();

        setTimeout(function () {
            $("#page-2 .blink").removeClass("fadeIn").removeClass("animated");
            play_search();
            moveBSlow(0, 1.8518, function () {
                moveToPos1();
//                moveToPos2();
//                moveToPos3();
//                moveToPos4();
//                moveToPos5();
//                moveToPos6();
//                moveToPos7();
//                moveToPos8();
//                moveToPos55();
            });
        }, 1e3);
    }

    var moveToPos1 = function () {
        $("#page-3").show();
        $("#page-3").css({
            "z-index": "1"
        });

        var x = (453 - gbw) / 108;
        var y = (494 - gbw) / 108;
        $("#page-2 .blink .inner").animate({
            'transform': 'scale(0.9,0.9)',
            '-webkit-transform': 'scale(0.9,0.9)'
        }, 1e3, "linear");
        moveB(x, y, function () {
            stop_search();
            play_stop();
            blink(function () {
                //切换到第三页
                $("#page-2 .blink").off("tap").one("tap", function () {
                    hideZS();
                    //取当前的rem
                    var tw = $("#page-2 .tong").width() * (260 / 625) / ($("body").width() / 10);
                    var s = 5.71354 / tw;
                    preScale = s;
                    scale(s);
                    var w = $("body").width();
                    var iw = w / s;
                    var aw = ($("#page-2 .container").width() - iw) / 2;
                    var cw = (572 / 1080) * $("#page-2 .container").width();
                    var x = ($("#page-2 .container").width() - aw - cw) / $("#page-2 .container").width() * 10;
                    var h = $("body").height();
                    var ih = h / s;
                    var ah = ($("#page-2 .container").height() - ih) / 2;
                    var ch = (718 / 1080) * $("#page-2 .container").height();
                    var y = ($("#page-2 .container").height() - ah - ch) / $("#page-2 .container").height() * 10;
                    moveC(x, -y, function () {
//                    $("#page-2").css("display", "none");
                        initPage3();
                    });
                });
            });
        });
    }

    var endPage3 = function () {
//        scale(1);
//        moveC(0, 0, function () {
        moveToPos2();
//        });
    }

    var moveToPos2 = function () {
        play_search();
        $("#page-4").show();
        $("#page-4").css({
            "z-index": "1"
        });
        var tw = $("#page-2 .tong").width() * (335 / 625) / ($("body").width() / 10);
        var s = 4.61771 / tw;
        var dos = s * preScale;
        preScale = dos;
        scale(dos);
        var w = $("body").width();
        var iw = w / s;
        var aw = ($("#page-2 .container").width() - iw) / 2;
        var cw = (648 / 1080) * $("#page-2 .container").width();
        var x = ($("#page-2 .container").width() - aw - cw) / $("#page-2 .container").width() * 10;
        var h = $("body").height();
        var ih = h / s;
        var ah = ($("#page-2 .container").height() - ih) / 2;
        var ch = (725 / 1080) * $("#page-2 .container").height();
        var y = ($("#page-2 .container").height() - ah - ch) / $("#page-2 .container").height() * 10;
        moveC(x, -y, function () {
            //切换到第四页
//            $("#page-4 .blink").off("tap").one("tap", function () {
            initPage4();
//            });
        });

        var x = (451 - gbw) / 108;
        var y = (563 - gbw) / 108;

        moveB(x, y, function () {
            stop_search();
            play_stop();
            blink(function () {
                $("#page-4").css({
                    "z-index": "10"
                });
            });
        });
    }

    var endPage4 = function () {
//        scale(1);
//        moveC(0, 0, function () {
        moveToPos3();
//        });
    }

    var moveToPos3 = function () {
        play_search();
        $("#page-5").show();
        $("#page-5").css({
            "z-index": "1"
        });
        var tw = $("#page-2 .tong").width() * (446 / 625) / ($("body").width() / 10);
        var s = 3.25 / tw;
        var dos = s * preScale;
        preScale = dos;
        scale(dos);
        var w = $("body").width();
        var iw = w / s;
        var aw = ($("#page-2 .container").width() - iw) / 2;
        var cw = (919 / 1080) * $("#page-2 .container").width();
        var x = ($("#page-2 .container").width() - aw - cw) / $("#page-2 .container").width() * 10;
        var h = $("body").height();
        var ih = h / s;
        var ah = ($("#page-2 .container").height() - ih) / 2;
        var ch = ( 941 / 1080) * $("#page-2 .container").height();
        var y = ($("#page-2 .container").height() - ah - ch) / $("#page-2 .container").height() * 10;
        moveC(x, -y, function () {

//            $("#page-5 .blink").off("tap").one("tap", function () {
            initPage5();
//            });
        });

        var x = (610 - gbw) / 108;
        var y = (510 - gbw) / 108;
        moveB(x, y, function () {
            stop_search();
            play_stop();
            blink(function () {
                $("#page-5").css({
                    "z-index": "10"
                });
            });
        });
    }

    var endPage5 = function () {
//        scale(1);
//        moveC(0, 0, function () {
        moveToPos4();
//        });
    }

    var moveToPos4 = function () {
        play_search();
        $("#page-6").show();
        $("#page-6").css({
            "z-index": "1"
        });
        var tw = $("#page-2 .tong").width() * (263 / 625) / ($("body").width() / 10);
        var s = 3.5 / tw;
        var dos = s * preScale;
        preScale = dos;
        scale(dos);
        var w = $("body").width();
        var iw = w / s;
        var aw = ($("#page-2 .container").width() - iw) / 2;
        var cw = (467 / 1080) * $("#page-2 .container").width();
        var x = (cw - aw) / $("#page-2 .container").width() * 10;
        var h = $("body").height();
        var ih = h / s;
        var ah = ($("#page-2 .container").height() - ih) / 2;
        var ch = ( 627 / 1080) * $("#page-2 .container").height();
        var y = ($("#page-2 .container").height() - ah - ch) / $("#page-2 .container").height() * 10;
        moveC(-x, -y, function () {
//            $("#page-6 .blink").off("tap").one("tap", function () {
            initPage6();
//            });
        });

        var x = (627 - gbw) / 108;
        var y = (653 - gbw) / 108;
        moveB(x, y, function () {
            stop_search();
            play_stop();
            blink(function () {

                $("#page-6").css({
                    "z-index": "10"
                });
            });
        });
    }


    var endPage6 = function () {
//        scale(1);
//        moveC(0, 0, function () {
        moveToPos5();
//        });
    }

    var moveToPos5 = function () {
        play_search();
        $("#page-7").show();
        $("#page-7").css({
            "z-index": "1"
        });
        var tw = $("#page-2 .tong").width() * (265 / 625) / ($("body").width() / 10);
        var s = 4.43795 / tw;
        var dos = s * preScale;
        preScale = dos;
        scale(dos);
        var w = $("body").width();
        var iw = w / s;
        var aw = ($("#page-2 .container").width() - iw) / 2;
        var cw = (620 / 1080) * $("#page-2 .container").width();
        var x = ($("#page-2 .container").width() - aw - cw) / $("#page-2 .container").width() * 10;
        var h = $("body").height();
        var ih = h / s;
        var ah = ($("#page-2 .container").height() - ih) / 2;
        var ch = ( 615 / 1080) * $("#page-2 .container").height();
        var y = ($("#page-2 .container").height() - ah - ch) / $("#page-2 .container").height() * 10;
        moveC(x, -y, function () {
//            $("#page-7 .blink").off("tap").one("tap", function () {
            initPage7();
//            });
        });

        var x = (456 - gbw) / 108;
        var y = (620 - gbw) / 108;
        moveB(x, y, function () {
            stop_search();
            play_stop();
            blink(function () {
                $("#page-7").css({
                    "z-index": "10"
                });
            });
        });
    }

    var endPage7 = function () {
        moveToPos55();
    }

    var moveToPos55 = function () {
        play_search();
        $("#page-7").show();
        $("#page-7").css({
            "z-index": "1"
        });
        var tw = $("#page-2 .tong").width() * (265 / 625) / ($("body").width() / 10);
        var s = 4.43795 / tw;
        var dos = s * preScale;
        preScale = dos;
        scale(dos);
        var w = $("body").width();
        var iw = w / s;
        var aw = ($("#page-2 .container").width() - iw) / 2;
        var cw = (620 / 1080) * $("#page-2 .container").width();
        var x = ($("#page-2 .container").width() - aw - cw) / $("#page-2 .container").width() * 10;
        var h = $("body").height();
        var ih = h / s;
        var ah = ($("#page-2 .container").height() - ih) / 2;
        var ch = ( 615 / 1080) * $("#page-2 .container").height();
        var y = ($("#page-2 .container").height() - ah - ch) / $("#page-2 .container").height() * 10;
        moveC(x, -y, function () {
//            $("#page-7 .blink").off("tap").one("tap", function () {
            initPage20();
//            });
        });

        var x = (426 - gbw) / 108;
        var y = (629 - gbw) / 108;
        moveB(x, y, function () {
            stop_search();
            play_stop();
            blink(function () {
                $("#page-20").css({
                    "z-index": "10"
                });
            });
        });
    }

    var endPage20 = function () {
        moveToPos6();
    }

    var moveToPos6 = function () {
        play_search();
        $("#page-8").show();
        $("#page-8").css({
            "z-index": "1"
        });
        var tw = $("#page-2 .tong").width() * (366 / 625) / ($("body").width() / 10);
        var s = 5.416666 / tw;
        var dos = s * preScale;
        preScale = dos;
        scale(dos);
        var w = $("body").width();
        var iw = w / s;
        var aw = ($("#page-2 .container").width() - iw) / 2;
        var cw = (869 / 1080) * $("#page-2 .container").width();
        var x = ($("#page-2 .container").width() - aw - cw) / $("#page-2 .container").width() * 10;
        var h = $("body").height();
        var ih = h / s;
        var ah = ($("#page-2 .container").height() - ih) / 2;
        var ch = ( 495 / 1080) * $("#page-2 .container").height();
        var y = ($("#page-2 .container").height() - ah - ch) / $("#page-2 .container").height() * 10;
        moveC(x, -y, function () {
//            $("#page-8 .blink").off("tap").one("tap", function () {
            initPage8();
//            });
        });

        var x = (457 - gbw) / 108;
        var y = (696 - gbw) / 108;
        moveB(x, y, function () {
            stop_search();
            play_stop();
            blink(function () {
                $("#page-8").css({
                    "z-index": "10"
                });
            });
        });
    }

    var endPage8 = function () {
        moveToPos7();
    }

    var moveToPos7 = function () {
        play_search();
        $("#page-9").show();
        $("#page-9").css({
            "z-index": "1"
        });
        var tw = $("#page-2 .tong").width() * (272 / 625) / ($("body").width() / 10);
        var s = 5.822916 / tw;
        var dos = s * preScale;
        preScale = dos;
        scale(dos);
        var w = $("body").width();
        var iw = w / s;
        var aw = ($("#page-2 .container").width() - iw) / 2;
        var cw = (633 / 1080) * $("#page-2 .container").width();
        var x = ($("#page-2 .container").width() - aw - cw) / $("#page-2 .container").width() * 10;
        var h = $("body").height();
        var ih = h / s;
        var ah = ($("#page-2 .container").height() - ih) / 2;
        var ch = ( 480 / 1080) * $("#page-2 .container").height();
        var y = ($("#page-2 .container").height() - ah - ch) / $("#page-2 .container").height() * 10;
        moveC(x, -y, function () {
//            $("#page-9 .blink").off("tap").one("tap", function () {
            initPage9();
//            });
        });

        var x = (515 - gbw) / 108;
        var y = (690 - gbw) / 108;
        moveB(x, y, function () {
            stop_search();
            play_stop();
            blink(function () {
                $("#page-9").css({
                    "z-index": "10"
                });
            });
        });
    }

    var endPage9 = function () {
        moveToPos8();
    }

    var moveToPos8 = function () {
        play_search();
        $("#page-19").css({
            "z-index": "1",
            "display": "block"
        });
        var tw = $("#page-2 .tong").width() * (446 / 625) / ($("body").width() / 10);
        var s = 4.15104 / tw;
        var dos = s * preScale;
        preScale = dos;
        scale(dos);
        var w = $("body").width();
        var iw = w / s;
        var aw = ($("#page-2 .container").width() - iw) / 2;
        var cw = (752 / 1080) * $("#page-2 .container").width();
        var x = ($("#page-2 .container").width() - aw - cw) / $("#page-2 .container").width() * 10;
        var h = $("body").height();
        var ih = h / s;
        var ah = ($("#page-2 .container").height() - ih) / 2;
        var ch = ( 1080 / 1080) * $("#page-2 .container").height();
        var y = ($("#page-2 .container").height() - ah - ch) / $("#page-2 .container").height() * 10;
        moveC(x, -y, function () {
//            $("#page-19 .blink").off("tap").one("tap", function () {
            initPage19();
//            });
        });

        var x = (535 - gbw) / 108;
        var y = (254 - gbw) / 108;
        moveB(x, y, function () {
            stop_search();
            play_stop();
            blink(function () {
                $("#page-19").css({
                    "z-index": 10,
                    "display": "block"
                });
                $("#page-19").animate({
                    opacity: 1
                }, 1e3, "linear", function () {
                });
            });
        });
    }

    var endPage19 = function () {
        scale(1);
        $("#page-2 .blink").fadeOut();
        showZS();
        moveC(0, 0, function () {
            initPage10();
        });
    }


    var scale = function (n, cb) {
        $("#page-2").animate({
            'transform': 'scale(' + n + ',' + n + ')',
            '-webkit-transform': 'scale(' + n + ',' + n + ')'
        }, 1e3, "linear", function () {
            cb && cb();
        })
    }

    var moveC = function (x, y, cb) {
        $("#page-2 .container").animate({
            'transform': 'translate(' + x + 'em,' + y + 'em)',
            '-webkit-transform': 'translate(' + x + 'em,' + y + 'em)'
        }, 1e3, "linear", function () {
            cb && cb();
        })
    }

    var moveB = function (x, y, cb) {
        $("#page-2 .blink").animate({
            'transform': 'translate(' + x + 'em,' + y + 'em)',
            '-webkit-transform': 'translate(' + x + 'em,' + y + 'em)'
        }, 1e3, "linear", function () {
            cb && cb();
        })
    }

    var moveBSlow = function (x, y, cb) {
        $("#page-2 .blink").animate({
            'transform': 'translate(' + x + 'em,' + y + 'em)',
            '-webkit-transform': 'translate(' + x + 'em,' + y + 'em)'
        }, 1e3, "linear", function () {
            cb && cb();
        })
    }

    var blink = function (cb) {
        var t = 200;
        $("#page-2 .blink").animate({
            "opacity": "0"
        }, t, "linear", function () {
            $("#page-2 .blink").animate({
                "opacity": "1"
            }, t, "linear", function () {
                $("#page-2 .blink").animate({
                    "opacity": "0"
                }, t, "linear", function () {
                    $("#page-2 .blink").animate({
                        "opacity": "1"
                    }, t, "linear", function () {
                        cb && cb();
                    })
                })
            })
        })
    }
</script>